---
export interface Props {
	minimal?: boolean;
}

const { minimal } = Astro.props as Props;
---

<ul class:list={['fluid-grid', { 'fluid-grid--minimal': minimal }]}>
	<slot />
</ul>

<style>
	.fluid-grid {
		--column-min-width: 13rem;
		text-align: start;
		margin-block: 0.5rem;
		padding-inline-start: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(var(--column-min-width), 1fr));
		grid-template-columns: repeat(auto-fill, minmax(min(var(--column-min-width), 100%), 1fr));
		gap: 1.5rem 2rem;
		list-style: none;
		align-items: start;
	}

	@media (min-width: 37.75em) {
		.fluid-grid {
			gap: 2rem;
		}
	}

	.fluid-grid--minimal {
		--column-min-width: 8rem;
		gap: 1.5rem 0.75rem;
	}
</style>
